<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/page/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/page/css/select.css"/>
</head>
<body>
<div class="layui-tab" lay-allowClose="true" lay-filter="project">
    <ul class="layui-tab-title">
        <li lay-id="1" class="layui-this">项目列表</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form layui-form-pane" lay-filter="addClient" action="" id="content">
                <div class="layui-inline" style="margin-left: 20px; margin-top: 20px;">
                    <form class="layui-form layui-form-pane" action="javascript:;">
                        <div class="layui-form-item" id="addressDiv">
                            <label class="layui-form-label">地址</label>
                            <div class="layui-input-inline">
                                <select name="clientProvince" lay-filter="province" id="clientProvince"
                                        v-model="onedecClient.clientProvince">
                                    <option></option>
                                </select>
                            </div>

                            <div class="layui-input-inline">
                                <select name="clientCity" lay-filter="city" id="clientCity"
                                        v-model="onedecClient.clientCity">
                                    <option></option>
                                </select>
                            </div>

                            <div class="layui-input-inline">
                                <select name="clientArea" lay-filter="area" id="clientArea"
                                        v-model="onedecClient.clientArea">
                                    <option></option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <div class="layui-input-block">
                                    <input type="text" name="clientAddr" required
                                           style="margin-left: -110px;width: 190px;"
                                           placeholder="请输入详细地址"
                                           id="clientAddr" class="layui-input" v-model="onedecClient.clientAddr">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 20px">
                            <label class="layui-form-label" style="">项目状态</label>
                            <div class="layui-input-inline">
                                <select id="clientStatus" name="clientStatus" v-model="onedecClient.clientStatus">
                                    <option value="">请选择项目状态</option>
                                    <option value="1">项目进行中</option>
                                    <option value="2">项目已结束</option>
                                </select>
                            </div>
                            <label class="layui-form-label" style="">起始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="test5" placeholder="检索在此时间之后的项目">
                            </div>
                            <label class="layui-form-label" style="">截至时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="test6" placeholder="检索在此时间之后的项目">
                            </div>
                            <div class="layui-input-inline">
                                <input type="button" id="searchBtn" value="搜索" data-type="reload" class="layui-btn"
                                       style="width: 130px;"></input>
                            </div>
                        </div>
                    </form>
                </div>

            </form>
            <table id="clients" lay-filter="test"></table>
        </div>
    </div>
</div>

</div>
</div>


<script src="/page/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/page/js/select1.js" type="text/javascript" charset="utf-8"></script>
<script src="/page/js/jquery-3.5.1.min.js"></script>
<script src="js/project.js"></script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#test5'
            , type: 'datetime'
        });
        laydate.render({
            elem: '#test6'
            , type: 'datetime'
        });
    })

    function elementReload() {
        layui.use('element', function () {
            var $ = layui.jquery
                , element = layui.element;
            var active = {
                tabAdd: function (url, id, name) {
                    element.tabAdd('project', {
                        title: name,
                        content: '<iframe data-frameid=' + '"' +
                            id + '"' +
                            'src=' + '"' + url + '"' + 'style="width:100%;height:560px;border:none "></iframe>'
                        , id: id
                    })

                }

            }
            window.setTimeout(() => {
                $(".detals").on("click", function () {
                    var $1 = $(this);
                    var id = $1.attr("data-id");
                    active.tabAdd("project.html?" + id, id, "项目" + id)
                })
            }, 1000)

        })
    }

    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#clients'
            , height: 450
            , url: '/project/project/list' //数据接口
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , limit: 8//一页显示多少条
                , limits: [5, 10, 8, 15]//每页条数的选择项
                , groups: 2 //只显示 2 个连续页码
            }
            , parseData: function (res) {
                elementReload()
                if (res.code == 200) {
                    res.code = 0
                }
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.totalNum,
                    "data": res.data.data,
                }
            }
            , id: 'reload'
            , cols: [[ //表头
                {field: 'id', title: '序号', width: 80, sort: true, fixed: 'left', align: 'center', type: 'numbers'}
                , {field: 'projectNull', title: '项目编号', width: 150, sort: true, fixed: 'left', align: 'center'}
                , {field: 'projectCustomerName', title: '客户名', width: 120, align: 'center'}
                , {field: 'projectCustomerPhone', title: '客户联系方式', width: 150, align: 'center'}
                , {field: 'projectAddress', title: '项目地址', width: 130, align: 'center'}
                , {
                    field: 'projectArea', title: '房屋面积', width: 90, align: 'center', templet: function (e) {
                        return e.projectArea + "m²"
                    }
                }
                , {field: 'projectOrderTime', title: '项目起始时间', width: 130, sort: true, align: 'center'}
                , {
                    field: 'projectSts', title: '项目状态', width: 135, sort: true, align: 'center', templet: function (e) {
                        if (e.projectSts == 1) {
                            return '项目进行中'
                        } else {
                            return '项目已结束'
                        }
                    }
                }
                , {field: 'projectInPhase', title: '阶段', width: 100, sort: true, align: 'center'},
                , {
                    field: 'projectId',
                    title: '操作',
                    width: 240,
                    sort: true,
                    align: 'center',
                    templet: function (e) {
                        var inPhase = e.projectInPhase;
                        var btn = btns.get(inPhase);
                        btn = btn.replace("id", e.projectNull);

                        return '<div><button type="button" class="layui-btn layui-btn-sm layui-btn-normal detals" data-id="' + e.projectNull + '">查看详情</button>' + btn + '</div>'
                    },
                    /* templet: `<div><button type="button" class="layui-btn layui-btn-sm layui-btn-normal" data-id="{{d.projectNull}}">查看详情</button></div>`*/
                },
            ]]
        });

        $("#searchBtn").on('click', function () {
            var clientProvince = $('#clientProvince');
            var clientCity = $('#clientCity');
            var clientArea = $('#clientArea');
            var clientAddr = $('#clientAddr');
            var address = (clientProvince.val() == '全部' ? '' : clientProvince.val()) + (clientCity.val() == '全部' ? '' : clientCity.val()) + (clientArea.val() == '全部' ? '' : clientArea.val()) + clientAddr.val()
            var clientStatus = $('#clientStatus');
            console.log($("#test5").val() == '' ? null : $("#test5").val())
            elementReload()
            table.reload("reload", {
                method: 'get',
                where: {
                    projectAddress: address,
                    projectSts: clientStatus.val(),
                    projectOrderTime: $("#test5").val() == '' ? null : $("#test5").val(),
                    projectEndTime: $("#test6").val() == '' ? null : $("#test5").val(),
                    projectInPhase: null,

                },
                page: {
                    curr: 1
                },
            })
        });
    });
</script>
</body>
</html>